import { BrowserRouter as Router, Switch } from 'react-router-dom'
import routes, { makeRoutes, makeNavLinks } from './routes'
const App = () => {
  return (
    <Router>
      <div className="container d-flex justify-content-between mt-3">
        <div style={{ width: '200px' }}>{makeNavLinks(routes)}</div>
        <div style={{ flex: 1 }}>
          <Switch>{makeRoutes(routes)}</Switch>
        </div>
      </div>
    </Router>
  )
}
export default App
/*
  渲染规则
  - 当props或state发生改变时, 会重新渲染
  - 当父组件重新渲染的时候, 它下面所有的子节点(继承自React.Component类型的class组件和一般的function组件)都会重新渲染

  PureComponent的特点: 
  shouldComponentUpdate函数会对组件的props和state做浅对比, 如果浅对比结果相同, 则返回false(不render)

  为什么不直接使用PureComponent?
  - 要根据实际情况判断, PureComponent, 因为对比属性/状态也会产生一些运算

  介绍两个新的hooks
  useMemo
  useCallback

  相同点:
  参数形式一样

  1.回调函数
  2.数组(依赖关系)
  
  useMemo(()=>{...},[dep1,dep2, ...])  // 第二个参数不写没有任何意义, 因为不写每次都会执行

  useCallback(()=>{...},[dep1,dep2, ...])
*/
